<html>
  <head>
    <title></title>
    <style>
    
      widget { size:100dip; }
    
    </style>
    
    <style#dynamic></style>
    
    <script type="text/tiscript">
    
      function updateWidgetStyles(clr,hoverClr) {
      
        const styleBag = $(style#dynamic);
        
        styleBag.deactivate(); // remove all rules defined in it
        
        styleBag.text = String.printf(
             "widget { background:rgb(%d,%d,%d); } "
             "widget:hover { background:rgb(%d,%d,%d); }", 
             clr.r,clr.g,clr.b, hoverClr.r,hoverClr.g,hoverClr.b);
        
        styleBag.activate(); // inject rules
      }
    
    
      $(#hue).on("change", function(){
        var clr = Color.hsv( deg(this.value), 1, 1 );
        var clrHover = Color.hsv( deg((180 + this.value) % 360), 1, 1 );
        updateWidgetStyles(clr,clrHover);
      });    
    
    </script>
  </head>
<body>

  <widget>Demo widget</widget>
  
  <p>change back and hover colors: <input|hslider id="hue" min=0 max=360 value=54 /></p>


</body>
</html>
